<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <!-- Vue作用的容器 -->
    <div id="app"></div>
    <script>
      /*
       el配置项
        提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标
        可以是CSS选择器(字符串)  也可以是一个HTMLElement实例
        在实例挂载之后 元素可以用vm.$el访问这个被挂载实例的容器
       */
      const vm = new Vue({
        el: "#app",
        // el: document.getElementById("app"),
        // el: document.querySelector("#app"),
      });
      console.log(vm);
      console.log(vm.$el);
      /* 
      Vue接受的是一个配置对象 一般参数过多 都会选择配置对象
      */
      //假如Vue接受的不是配置对象作为参数
      // function Vue(el, methods, watch, computed, data) {}

      //如果传递的不是配置项 则我们需要记住参数顺序
      // new Vue("#app", "", "");
      //如果传递的不是配置项  则我们无法简便的传递我们需要的参数
      // new Vue("#app", null, null, null, 1);

      //假如Vue接受的配置对象作为参数
      /* function Vue(options) {
        const { el, methods, watch, computed, data } = options;
      }
      new Vue({ el: "#app" }); */
    </script>
  </body>
</html>
